<template>
  <el-dropdown
    @command="handleCommand">
    <span class="el-dropdown-link">
      {{label}}：{{selectedText}}
      <i class="el-icon-caret-bottom el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item in options"
        :key="item.val"
        :command="item.val">
        {{item.txt}}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  props: {
    label: String,
    options: Array,
  },
  data() {
    return {
      selected: null,
      selectedText: '全部',
    };
  },
  watch: {
    selected(value, oldValue) {
      if (this.options.length == 0) return '';
      const item = this.options.filter(item => item.val == value)[0];
      if (item) {
        this.selectedText = item.txt;
      } else {
        this.selectedText = this.options.filter(item => item.val == '')[0].txt;
      }
    },
  },
  methods: {
    handleCommand(command) {
      this.selected = command;
      this.$emit('change', command);
    },
  }
}
</script>
<style scoped lang="scss">
  .filter-block {
    .el-dropdown-link {
      color: #fff;
      cursor: pointer;
      font-size: 12px;
    }
  }
</style>
